const {reactive,computed, ref}=Vue;
const app=Vue.createApp({
    data(){
        return{
            title:'每天都要加油鸭！',
            currentIndex :0,//当前所在图片下标
			timer:null,//定时轮询
			imgArr:[
                {	id:0,
                    url:"./img/leftpic1.jpg",
                },{
                    id:1,
                    url:"./img/leftpic2.jpg",
                },{
                    id:2,
                    url:"./img/leftpic3.jpg",
                },{
                    id:3,
                    url:"./img/leftpic4.jpg",
                },{
                    id:4,
                    url:"./img/leftpic5.jpg",
                }
			],
            showWindow:false,
            showPlan:false,
            showFinish:false,
            showNoFinish:false
        }
    },
    methods:{
        //开启定时器
		startInterval(){
            // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
            clearInterval(this.timer);
            this.timer = setInterval(()=>{
                this.currentIndex++;
                if(this.currentIndex > this.imgArr.length-1){
                    this.currentIndex = 0
                }
            },3000)
        },
        // 点击左右箭头
		clickIcon(val){
            if(val==='down'){
                this.currentIndex++;
                if(this.currentIndex===this.imgArr.length){
                    this.currentIndex = 0;
                }
            }else{
                if(this.currentIndex === 0){
                    this.currentIndex = this.imgArr.length;
                }
                this.currentIndex--;
            }
        },
        // 点击控制圆点
		changeImg(index){
            this.currentIndex = index
        },
        //鼠标移入移出控制
        changeInterval(val){
            if(val){
                clearInterval(this.timer)
            }else{
                this.startInterval()
            }
        },
        //点击弹窗显示
        handleBtn(){
            this.showWindow=!this.showWindow;
        },
        //点击弹窗关闭
        stopBtn(){
            this.showWindow=!this.showWindow;
        },
        //添加计划
        myPlan(){
            this.showPlan=true;
            this.showFinish=false;
            this.showNoFinish=false
        },
        //已完成
        complete(){
            this.showPlan=false;
            this.showFinish=true;
            this.showNoFinish=false
        },
        //未完成
        undone(){
            this.showPlan=false;
            this.showFinish=false;
            this.showNoFinish=true
        }
    },
    computed:{
        //已完成
        dolist(){
            return  this.list.filter(item=>item.flag===true)
        },
        //未完成
        undolist(){
            return  this.list.filter(item=>item.flag===false)
        }
    },
    //进入页面后启动定时轮询
	mounted(){
        this.startInterval()
    },

    // components:{
    //     'plan':{
    //         data(){
    //             return{
    //                 showPlan:true
    //             }
    //         },
    //         template:`<section class="main" v-if="showPlan">
    //         <div class="selectAll">
    //         <input type="checkbox" class="select" v-model="isAll"/>
    //         <p class="all">全选</p>
    //         </div>
    //         <ul class="todo-list">
    //         <!-- 任务列表 -->
    //         <li v-for="(item, index) in list" :key="item.id">
    //           <div class="view">
    //             <!-- 双向绑定 flag -->
    //             <input class="toggle" type="checkbox" v-model="item.flag" />
    //             <label>{{ item.name }}</label>
    //             <!-- 删除按钮 -->
    //             <button class="destroy" @click="del(index)"></button>
    //           </div>
    //         </li>
    //         </ul>
    //         </section>`,
    //     }
    // },
    setup(){
        const list = ref([
            { id: 1, name: '吃饭', flag: false },
            { id: 2, name: '睡觉', flag: false },
            { id: 3, name: '打豆豆', flag: false },
        ])
        // 删除函数
        function del(index) {
            // index 要删除项的下标值
            // splice
            list.value.splice(index, 1)
        }

        //添加新计划
        const curTask = ref('');
            function add() {
              // 添加逻辑
              list.value.unshift({
                id: new Date(),
                name: curTask.value,
                flag: false
              })
              curTask.value = '';
            }
        
        //全选
        const isAll = computed({
            // 获取isAll数据的时候会执行get函数
            get() {
              // 当list列表中所有项的flag属性都为true 就为true
              // every
              return list.value.every(item => item.flag === true)
            },
            set(val) {
              // 拿到isAll最新值 遍历一下list 把里面的flag属性设置为最新值
              list.value.forEach(item => {
                item.flag = val
              })
            }
        })

        // 计算已完成的任务
        const Finnish = computed(()=>{
            return  list.value.filter(item=>item.flag === true).length
        })

        // 计算未完成的任务
        const count = computed(()=>{
            return  list.value.filter(item=>item.flag === false).length
        })

        return{
            list,
            del,
            curTask,
            add,
            isAll,
            Finnish,
            count
        }
    },
});
const vm=app.mount("#root");